<template>
  <div class="p1755746801">
    <uv-vtabs :current="dateIndex" :chain="false" :list="timeList" barWidth="320rpx" @change="change">
      <uv-vtabs-item>
        <div class="p1755748653">
          <div v-for="(item2,index2) in list2" :key="index2" @click="deliverTimeTap(item2, index2)"
            class="fac p1755746817">
            <div class="fz32" :class="deliverTime == item2.desc ? 'deliver_time-active' : ''">{{item2.name}}</div>
            <div v-if="deliverTime == item2.desc" :class="deliverTime == item2.desc ? 'deliver_time-active' : ''"
              class="p1755746825">
              <uv-icon color="#fff" name="checkbox-mark"></uv-icon>
            </div>
          </div>
        </div>
      </uv-vtabs-item>
    </uv-vtabs>
  </div>

</template>

<script>
  import { generateRangesUntilMidnight, formatDateCustom } from '@/util/tools.js'
  function weekdayFun(count = 0) {
    var today = new Date().getTime() + (count * 86400000);
    var day = (new Date(today)).getDay(); // 获取当前日期的周几（0表示周日，1表示周一，以此类推）
    var weekday = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
    return weekday[day]
  }

  export default {
    data() {
      return {
        timeList: [],
        deliverTime: null,
        deliverDate: null,
        timeIndex: 0,
        dateIndex: 0,
        checkboxValue: [' ']
      }
    },
    computed: {
      list2() {
        const _list = this.timeList[this.dateIndex]?.childrens;
        return _list ? _list : [];
      }
    },
    mounted() {

    },
    methods: {
      _initTime(count = 2, nameText= '立即取件') {
        let nowTime = new Date().getTime()
        let deliverTime = generateRangesUntilMidnight(false, (1000 * 60 * 70))[0]
        let deliverDate = formatDateCustom()
        this.deliverTime = deliverTime
        this.deliverDate = deliverDate
        let todayList = [{ name: nameText, desc: deliverTime }].concat(generateRangesUntilMidnight(false, (1000 * 60 * 90)).map(item => {
          return { name: item, desc: item }
        }))
        let tomorrowList = generateRangesUntilMidnight(false, 86400000).map(item => {
          return { name: item, desc: item }
        })
        let timeList = [
          { name: '今天（' + weekdayFun() + ')', desc: formatDateCustom(), childrens: todayList },
          { name: '明天（' + weekdayFun(1) + ')', desc: formatDateCustom(nowTime + 86400000), childrens: tomorrowList },
          { name: formatDateCustom(nowTime + (86400000 * 2)) + '(' + weekdayFun(2) + ')', desc: formatDateCustom(nowTime + (86400000 * 2)), childrens: tomorrowList },
          { name: formatDateCustom(nowTime + (86400000 * 3)) + '(' + weekdayFun(3) + ')', desc: formatDateCustom(nowTime + (86400000 * 3)), childrens: tomorrowList },
          { name: formatDateCustom(nowTime + (86400000 * 4)) + '(' + weekdayFun(4) + ')', desc: formatDateCustom(nowTime + (86400000 * 4)), childrens: tomorrowList },
        ]
        this.timeList = (timeList.slice(0, count))
      },
      _initPage(data) {
        let { deliverTime, deliverDate } = data
        this.timeList.forEach((item, index) => {
          if (item.desc == deliverDate) {
            console.log(index)
            this.dateIndex = index;
            this.deliverDate = item.desc;
            item.childrens.forEach((child, childIndex) => {
              if (child.desc == deliverTime) {
                this.timeIndex = childIndex;
                this.deliverTime = child.desc;
              }
            })
          }
        })
      },
      deliverTimeTap(item, index) {
        this.deliverTime = item.desc
        this.timeIndex = index
      },

      change(index) {
        this.dateIndex = index;
        this.timeIndex = 0;
        this.deliverDate = this.timeList[this.dateIndex].desc
        this.deliverTime = this.timeList[this.dateIndex].childrens[this.timeIndex].desc
      },
      openTap() {
        this.$emit('xyChange')

      },
      checkboxChange(value) {
        this.$emit('isChoose', value.length ? true : false)

      }
    }
  }
</script>

<style lang="scss">
  .p1755746801 {
    height: 100%;
    overflow: hidden;
  }



  .p1755158814 {
    padding-bottom: 20rpx;
    padding-top: 20rpx;
    height: 80rpx;
    line-height: 80rpx;
  }

  .p1755746817 {
    justify-content: space-between;
    border-bottom: 2rpx solid #EFF0F0;
    height: 100rpx;
    padding-left: 40rpx;
    padding-right: 30rpx;
  }

  .p1755156851 {
    min-width: 280rpx;
  }

  .p1755746825 {
    width: 40rpx;
    height: 40rpx;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: red;
  }

  .p1755748653 {
    width: 100% !important;
    height: 100%;
    overflow-y: auto;
    /* height: 40vh; */
    padding-right: 30rpx;
  }


  .deliver_date-active,
  .deliver_time-active {
    color: #F0AE2D;
  }
</style>
<style lang="scss" scoped></style>